<template>
  <div class="container">
    <div class="header">
      <el-form class="search-form" label-width="auto">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="药品名称：">
              <el-input
                  @change="searchDrug"
                  class="search-box"
                  placeholder="请输入搜索关键词"
                  suffix-icon="el-icon-search"
                  v-model="searchForm.name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批准文号：">
              <el-input
                  @change="searchDrug"
                  class="search-box"
                  placeholder="请输入搜索关键词"
                  suffix-icon="el-icon-search"
                  v-model="searchForm.approvalNumber">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="治疗疾病：">
              <el-input
                  @change="searchDrug"
                  class="search-box"
                  placeholder="请输入治疗疾病名称"
                  suffix-icon="el-icon-search"
                  v-model="searchForm.disease">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="tips">
        <div class="normal-text">找不到药品？</div>
        <el-link :underline="false" type="primary">点击反馈</el-link>
      </div>
    </div>
    <div class="drug-area">
      <el-row :gutter="24">
        <el-col :span="4" v-for="(item,index) in drugList" :key="index">
          <el-card class="single-drug" @click.native="showDrugDetail(item)">
            <img :src="item.cover" alt="" class="drug-cover"/>
            <el-divider></el-divider>
            <div class="drug-info">
              <div class="drug-title">{{ item.name }}</div>
              <div class="drug-producer">{{ item.producer }}</div>
              <div class="drug-introduction"><strong>主治：</strong><font color="#606266">{{ item.introduction }}</font>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-dialog
        title="药品信息"
        :visible.sync="showDrugDetailInfo"
        width="30%">
      <div class="drug-basic-info">
        <div class="drug-basic-title">
          <img src="../assets/image/introduce.png" alt="" class="drug-icon"/>
          <div class="drug-basic-text">{{ nowItem.name }}的说明书</div>
        </div>
        <el-form label-width="auto">
          <el-form-item label="【药品名称】">{{ nowItem.name }}</el-form-item>
          <el-form-item label="【批准文号】">{{ nowItem.approvalNumber }}</el-form-item>
          <el-form-item label="【生产企业】">{{ nowItem.producer }}</el-form-item>
          <el-form-item label="【成分】">{{ nowItem.name }}</el-form-item>
        </el-form>
      </div>
      <div class="drug-basic-info" style="margin-top: 10px">
        <div class="drug-basic-title">
          <img src="../assets/image/drug_guide.png" alt="" class="drug-icon"/>
          <div class="drug-basic-text">{{ nowItem.name }}的用药指导</div>
        </div>
        <div class="drug-description-text">{{ nowItem.guidance }}</div>
        <el-divider></el-divider>
        <div class="drug-basic-title">
          <img src="../assets/image/drug.png" alt="" class="drug-icon"/>
          <div class="drug-basic-text">{{ nowItem.name }}的副作用</div>
        </div>
        <div class="drug-description-text">{{ nowItem.sideEffects }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDrugDetailInfo = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getAllDrugInfo} from "@/api/drug";

export default {
  name: 'DrugInquiry',
  data() {
    return {
      nowItem: {},
      showDrugDetailInfo: false,
      allDrugList: [],
      drugList: [],
      searchForm: {
        name: '',
        approvalNumber: '',
        disease: ''
      }
    }
  },
  mounted() {
    this.getDrugList();
  },
  methods: {
    searchDrug() {
      if (this.searchForm.name.length <= 0 && this.searchForm.approvalNumber.length <= 0 && this.searchForm.disease.length <= 0) {
        this.drugList = this.allDrugList;
      }
      if (this.searchForm.name !== '' && this.searchForm.name.length > 0) {
        this.drugList = this.drugList.filter(item => item.name.includes(this.searchForm.name));
      }
      if (this.searchForm.approvalNumber !== '' && this.searchForm.approvalNumber.length > 0) {
        this.drugList = this.drugList.filter(item => item.approvalNumber.includes(this.searchForm.approvalNumber));
      }
      if (this.searchForm.disease !== '' && this.searchForm.disease.length > 0) {
        this.drugList = this.drugList.filter(item => item.introduction.includes(this.searchForm.disease));
      }
    },
    getDrugList() {
      getAllDrugInfo().then(res => {
        this.drugList = res.data;
        this.allDrugList = res.data;
      })
    },
    showDrugDetail(item) {
      this.showDrugDetailInfo = true;
      this.nowItem = item;
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes MoveIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;

  .header {
    width: 99%;
    display: flex;
    align-items: center;
    animation: MoveIn .7s cubic-bezier(.4, 0, .2, 1);

    .search-form {
      width: 60%;

      .search-box {
        width: 100%;

        /deep/ .el-input__inner {
          background-color: hsl(0 0% 100% / .74);
          outline: transparent solid 2px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .tips {
      margin-left: auto;
      display: flex;
      align-items: center;

      .normal-text {
        font-size: 14px;
      }
    }
  }


  .drug-area {
    flex: 1;
    overflow-y: auto;

    .single-drug {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      cursor: pointer;
      animation: MoveIn .7s cubic-bezier(.4, 0, .2, 1);

      .drug-cover {
        width: 100%;
        height: 150px;
      }

      .drug-info {
        flex: 1;

        .drug-title {
          font-size: 18px;
          font-weight: 700;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .drug-producer {
          color: #606266;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .drug-introduction {
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 使用省略号表示超出部分 */
          display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
          -webkit-box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式 */
          -webkit-line-clamp: 2; /* 限制显示的行数 */
        }
      }
    }

    .single-drug:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      transform: scale(1.02);
    }
  }

  .drug-area::-webkit-scrollbar {
    display: none;
  }

  .drug-basic-info {
    padding: 10px 20px;
    border: 1px solid #eee;

    .drug-basic-title {
      display: flex;
      align-items: center;

      .drug-basic-text {
        font-size: 20px;
        font-weight: 700;
        margin-left: 10px;
        color: #303133;
      }
    }
  }

  .drug-icon {
    width: 20px;
    height: 20px;
  }

  .drug-description-text {
    margin-top: 10px;
    font-size: 16px;
  }

  /deep/ .el-form-item {
    margin-bottom: 0;
    border-bottom: 1px dotted #ddd;
  }

  /deep/ .el-form-item__label {
    font-size: 16px;
  }

  /deep/ .el-form-item__content {
    font-size: 16px;
  }
}
</style>